<template>
  <div class="common-step4">
    <!-- 步骤条区域 -->
    <div class="step-container" v-if="showSteps">
      <el-steps
        style="width: 100%"
        align-center
        :active="5"
        finish-status="success"
        process-status="process"
        @step-click="handleStepClick"
      >
        <el-step title="申请入住" :status="getStepStatus(0)" />
        <el-step title="入住评估" :status="getStepStatus(1)" />
        <el-step title="入住审批" :status="getStepStatus(2)" />
        <el-step title="入住配置" :status="getStepStatus(3)" />
        <el-step title="签约办理" :status="getStepStatus(4)" />
      </el-steps>
    </div>

    <!-- 状态提示区域 -->
    <div class="approval-status">
      <div class="status-icon">
        <img src="/src/assets/images/注意1.png" alt="审批中图标" />
      </div>
      <div class="status-text">
        <p class="status-title">签约办理中</p>
        <p class="status-desc">
          稍等，入住申请单正在签约中，若该申请单长时间未处理，请联系（签约角色）！
        </p>
      </div>
    </div>

    <!-- 操作记录区域 -->
    <div class="operation-record">
      <div class="record-wrapper">
        <h3 class="record-title">操作记录</h3>
        <div class="record-content-center">
          <ul class="record-list">
            <li>
              <p class="record-action">发起申请-申请入住</p>
              <div class="record-meta">
                <p class="record-operator">{{ lastName }}</p>
                <p class="record-time">{{ lastTime }}</p>
              </div>
            </li>
            <li>
              <p class="record-action">审批-申请审批</p>
              <div class="record-meta">
                <p class="record-operator">{{ lastName1 }}(已同意)</p>
                <p class="record-time">{{ lastTime1 }}</p>
              </div>
            </li>
            <li>
              <p class="record-action">配置-入住配置</p>
              <div class="record-meta">
                <p class="record-operator">{{ lastName2 }}（已完成）</p>
                <p class="record-time">{{ lastTime2 }}</p>
              </div>
            </li>
            <li>
              <p class="record-action">签约-签约办理</p>
              <div class="record-meta">
                <p class="record-operator">{{ lastName2 }}（签约中）</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 返回按钮 -->
    <div class="btn-area">
      <el-button type="default" @click="handleBack">返回</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getReport } from "@/api/assessreport/report";
import { getUser } from "@/api/system/user";
import { getUniqueRecord } from "@/api/accraditationrecord/accraditationrecord";
import { getRuzhuByElder } from "@/api/rutui/ruzhu"; // 引入接口
import useUserStore from "@/store/modules/user";
import { ElMessage } from "element-plus";

const userStore = useUserStore();
const router = useRouter();
const route = useRoute();

// 接收路由参数
const receivedId = ref('');

// 控制步骤条显示
const showSteps = ref(true);

// 步骤状态逻辑
const getStepStatus = (stepIndex) => {
  const currentStep = 4; // 当前步骤为签约办理（索引4）
  if (stepIndex < currentStep) {
    return "success"; // 已完成步骤
  } else if (stepIndex === currentStep) {
    return "process"; // 当前步骤
  } else {
    return "wait"; // 未完成步骤
  }
};

// 步骤点击事件
const handleStepClick = (step) => {
  console.log("点击步骤索引：", step.index);
};

// 返回按钮事件
const handleBack = () => {
  router.back();
  console.log("点击了返回");
};

// 数据变量
const lastUserId = ref(''); // 发起人ID
const lastName = ref(''); // 发起人姓名
const lastTime = ref(''); // 发起时间

const approverId = ref(''); // 审批人ID
const lastName1 = ref(''); // 审批人姓名
const lastTime1 = ref(''); // 审批时间

// 新增：配置和签约相关变量
const userId2 = ref(''); // 配置人/签约人ID
const lastName2 = ref(''); // 配置人/签约人姓名
const lastTime2 = ref(''); // 配置时间

// 组件挂载时加载数据
onMounted(async () => {
  const id = route.query.id;
  console.log('接收的id参数：', id);
  receivedId.value = id;

  if (id) {
    try {
      // 1. 获取发起申请信息
      const reportRes = await getReport(id);
      console.log('查询评估报告成功：', reportRes);
      lastUserId.value = reportRes.data.creator;
      lastTime.value = reportRes.data.createTime || '无时间';

      // 获取发起人姓名
      if (lastUserId.value) {
        const userRes = await getUser(lastUserId.value);
        lastName.value = userRes.data.nickName || '未知用户';
      }

      // 2. 获取审批记录
      const approveRes = await getUniqueRecord({
        stepNo: 3,
        checkContentId: id
      });
      console.log('查询审批记录成功：', approveRes);
      const approveData = approveRes.data || {};
      approverId.value = approveData.approverId;
      lastTime1.value = approveData.createTime || '无时间';

      // 获取审批人姓名
      if (approverId.value) {
        const approverRes = await getUser(approverId.value);
        lastName1.value = approverRes.data.nickName || '未知人员';
      }

      // 3. 核心：调用getRuzhuByElder获取配置相关数据
      const res1 = await getRuzhuByElder(id); // 使用接收的id作为参数
      console.log('查询入住信息成功：', res1);
      // 赋值配置时间和配置人ID
      lastTime2.value = res1.data?.createTime || "无";
      userId2.value = res1.data?.creator || "无";

      // 4. 根据配置人ID查询姓名
      if (userId2.value && userId2.value !== "无") {
        const configUserRes = await getUser(userId2.value);
        lastName2.value = configUserRes.data?.nickName || '未知配置人';
      } else {
        lastName2.value = '未知配置人';
      }

    } catch (err) {
      console.error('数据加载失败：', err);
      ElMessage.error('数据加载失败，请刷新页面重试');
    }
  } else {
    console.warn('未接收到id参数');
    ElMessage.warning('未获取到数据ID');
  }
});
</script>

<style scoped>
/* 样式保持不变 */
.common-step4 {
  padding: 20px 0;
  background: #fff;
  border-radius: 8px;
  margin: 0 auto;
}

.common-step4 h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: center;
}

.approval-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  text-align: center;
}

.status-icon {
  margin: 0 auto 20px;
}

.status-icon img {
  width: 50px;
  height: 50px;
}

.status-text .status-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  word-wrap: break-word;
  word-break: break-all;
}

.status-text .status-desc {
  color: #666;
  max-width: 600px;
  word-wrap: break-word;
  word-break: break-all;
}

.operation-record {
 margin-bottom: 30px;
 align-items: center;
}

.record-wrapper {
  background: #f5f7fa;
  border-radius: 8px;
  max-width: 600px;
  padding: 20px;
  margin: 0 auto;
}

.record-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 20px 0;
  text-align: left;
}

.record-content-center {
  display: flex;
  justify-content: center;
}

.record-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 500px;
}

.record-list li {
  margin-bottom: 15px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.record-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.record-operator,
.record-time {
  margin: 0;
  white-space: nowrap;
}

.record-operator {
  color: #666;
  font-size: 13px;
}

.record-time {
  color: #999;
  font-size: 12px;
}

.record-action {
  font-weight: 500;
  margin: 0 0 8px 0;
  font-size: 14px;
}

.step-container {
  margin: 20px 0;
}

.btn-area {
  text-align: center;
}

:deep(.el-step__title.is-process) {
  font-weight: bold;
}
</style>